<template>
<div class="container" @click="toDetail()">
	<!-- 观看数量 -->
	<div class="eys">
		<img src="/public/eye.svg" alt="">
		<div>{{ article.watch }}</div>
	</div>
	<div class="article-list_item">
		<div class="article-list_img">
			<!-- 封面 -->
			<img class="mainImg" :src="article.cover" alt="">
		</div>
		<div class="article-list_information">
			<!-- 用户头像和用户名 -->
			<img class="userImg" :src="writer.img" alt="">
			<span>{{ writer.userName }}</span>
		</div>
		<div class="article-list_content">
			<!-- 文章内容 -->
			<div class="title">{{ article.title }}</div>
			<div class="desc">{{ article.content.slice(0, 20) }}</div>
		</div>
		<!-- 分割线 -->
		<div class="line"></div>
	</div>
</div>
</template>

<script setup>
import { ref, } from 'vue';

const emits = defineEmits(['toDetail'])

const props = defineProps({
	article:{
		uid:Number,
		cover:String,
		title:String,
		content:String,
		articleId:Number
	},
	writer:{
		uid:Number,
		userName:String,
	}
})

const toDetail = function () {
	emits('toDetail',props.article.articleId,props.writer.uid)
}

</script>

<style lang="scss" scoped>
.container {
	position: relative;
	z-index: 99999;
	width: 280px;
}
.article-list_item {
	height: 290px;
	width: 100%;
	border-radius: 60px;
	background-color: #ccc;
	box-sizing: border-box;
	.article-list_img {
		overflow: hidden;
		border-radius: 60px 60px 0 0;
	}

	.mainImg {
		width: 280px;
		height: 200px;
		object-fit: fill; // 保持横纵比
		transition: all 1s;
	}

	.mainImg:hover {
		transform: scale(1.2);
	}
}
.article-list_item:hover {
	border: 5px solid yellow;
	border-radius: 60px 60px 60px 0;
	overflow: hidden;
}
.article-list_information {
	width: 100%;
	height: 50px;
	background-color: rgb(34, 34, 34);
	display: flex;
	flex-direction: row;
	align-items: center;

	.userImg {
		padding-left: 10px;
		position: relative;
		top: -15px;
		width: 60px;
		height: 60px;
		border-radius: 100px;
	}

	span {
		padding-left: 10px;
		align-self: flex-start;
		font-family: 'zzz-font';
		line-height: 30px;
		font-size: 20px;
		color: #425a71;
	}
}

.line {
	position: relative;
	top: -70px;
	left: 81px;
	border: 1px solid rgb(84, 84, 84);
	background-color: rgb(84, 84, 84);
	align-self: flex-end;
	height: 1px;
	width: 68%
}

.article-list_content {
	width: 100%;
	border-radius: 0 0 60px 0px;
	background-color: rgb(34, 34, 34);
	overflow: hidden;

	.title {
		width: 100%;
		height: 20px;
		font-size: 18px;
		font-family: 'zzz-font';
		color: rgb(33, 151, 206);
	}

	.desc {
		width: 100%;
		height: 30px;
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-family: 'zzz-font';
		color: rgb(164, 164, 164);
	}
}

.eys {
	position: relative;
	top: 40px;
	left: 20px;
	display: flex;
	z-index: 100;
	flex-direction: row;

	div {
		padding-left: 3px;
		align-self: center;
		font-family: 'zzz-font';
		color: #FC427B;
		font-size: 12px;
	}
}

</style>